<template>
  <div class="post-form mb-3">
    <div class="card card-info">
      <div class="card-header bg-info text-white">说点啥...</div>
      <div class="card-body">
        <form @submit.prevent="submit">
          <TextArea name="text" placeholder="随便说点..." v-model="text" :error="errors.text"></TextArea>
          <input type="submit" class="btn btn-dark">
        </form>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import TextArea from "../common/TextArea";
export default {
  data() {
    return {
      text: "",
      errors: {}
    };
  },
  components: { TextArea },
  methods: {
    submit() {
      const user = this.$store.getters.user;
      const newPosts = {
        name: user.name,
        avatar: user.avatar,
        text: this.text
      };
      this.$axios
        .post("http://localhost:5000/api/posts", newPosts)
        .then(res => {
          this.errors = {};
          this.text = "";
          this.$emit("update");
          //   console.log(res.data);
        })
        .catch(err => {
          errors = err.response.data;
        });
    }
  }
};
</script>

<style scoped lang="stylus">
</style>
